<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>regist</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>

    <style>
        * {
            padding: 0px;
            margin: 0px;
            text-decoration: none;
            list-style: none;
            font-size: 15px;
            color: black;

        }

        .beijing {

        }

        .img {
            width: 400px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 150px;
            left: 300px;
            z-index: 2;


        }
    </style>
    <script>
        $(function () {
            $(".btn").click(function () {
                let username = $(".text").val()
                let password = $(".password").val()
                let checkpassword=$(".checkpassword").val()
                if (!username) {
                    $(".white").show().html("请输入用户名!");
                    return;
                }
                if (!password) {
                    $(".white").show().html("请输入密码!");
                    return;
                }
                if (password!=checkpassword){
                    $(".white").show().html("密码和确认密码不匹配，请重新输入!");
                    return;
                }
                let xhr = new XMLHttpRequest();
                xhr.open("post", "http://localhost:8080/login/RegistServlet")
                xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf-8")
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4) {
                        if (this.status >= 20 && this.status < 300) {
                            let jsonData = this.responseText;
                            console.log("服务器的响应：", jsonData)
                            let data = JSON.parse(jsonData)
                            console.log(data.code)
                            if (data.code === 20) {
                                window.location = "http://localhost:8080/login/login/login.jsp";
                            } else if (data.code === 30) {
                                $(".intext").show().html(data.msg);

                            }
                        }
                    }
                }
                xhr.send("username=" + username + "&password=" + password + "&action=regist");
                console.log(username)
                console.log(password)
                console.log(checkpassword)
            })

        })
    </script>
</head>

<body>
<div class="beijing">
    <img src="https://img2.baidu.com/it/u=1683768427,1795469948&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="">
    <div class="img">
        <div  >
            <span class="white">  </span>
        </div>
        <div class="intext">
            <span>用户名：</span>
            <input class="text" type="text" placeholder="邮箱/用户名/登录手机" name="username">
        </div>
        <div class="inpassword">
            <span>密 码：</span>
            <input class="password" type="password" placeholder="密码" name="password">
        </div>
        <div>
            <span>确认密码</span>
            <input class="checkpassword" type="password" placeholder="确认密码" name="checkpassword">
        </div>
        <div class="btn"><a>注册</a></div>
    </div>

</div>


</body>

</html>